<template>
  <div class="adaptive-container shadow">
    <Table
      ref="tableRef"
      border
      :size="tableSize"
      :columns="columns"
      :data="data"
      :height="tableHeight"
      :show-header="showHeader"
      class="table"
      @on-selection-change="changeSelectTab"
    >
      <div class="table-header-title disFlex Flex-middle Flex-between" slot="header">
        <div class="disFlex Flex-middle">
          <span>{{tableTitle}}</span>
          <slot></slot>
        </div>
        <!-- <Button class="table-btn" type="primary" size="default" @click="daochuFn">导出列表</Button> -->
        <Button
          class="table-btn"
          type="primary"
          size="default"
          @click="newOneFn"
          v-if="newOne"
        >{{newOne}}</Button>
      </div>
      <div slot="footer">
        <Row type="flex" justify="center" align="middle">
          <Page
            :current="page"
            :total="total"
            :page-size="pageNum"
            @on-change="changePageFn"
            show-elevator
          />
        </Row>
      </div>
    </Table>
  </div>
</template>

<script>
export default {
  name: "",
  // props: [
  //   "columns",
  //   "data",
  //   "page",
  //   "total",
  //   "pageNum",
  //   "newOne",
  // ],
  props: {
    columns: {
      type: Object,
      default: ''
    },
    data: {
      type: Object,
      default: ''
    },
    page: {
      type: Number,
      default: ''
    },
    total: {
      type: Number,
      default: ''
    },
    pageNum: {
      type: Number,
      default: ''
    },
    newOne: {
      type: String,
      default: ''
    },
    tableTitle: {
      type: String,
      default: '数据列表'
    },
    tableSize: {
      type: String,
      default: 'default'
    },
    showHeader: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {};
  },
  components: {},

  mounted () {
    // 初始化表格高度/监听窗口变化
    // this.windowResizeFn();
  },

  methods: {
    // 监听窗口变化
    windowResizeFn () {
      // 设置表格高度
      this.tableHeight =
        document.getElementsByClassName("adaptive-container")[0].offsetHeight -
        12;

      // 监听窗口变化
      window.onresize = () => {
        this.tableHeight =
          document.getElementsByClassName("adaptive-container")[0]
            .offsetHeight - 12;
      };
    },
    changePageFn (e) {
      this.$emit("changePage", { 'page': e })
    },
    changeSelectTab (selection) {
      this.$emit("onchangeSelect", { selection })
    },
    // 调用父组件新建方法
    newOneFn () {
      this.$emit("newOneFn")
    }
  }
};
</script>

<style scoped lang="less">
/*表头标题*/
.table-header-title {
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;
}

/*表头提示图标*/
.table-header-icon {
  font-size: 20px;
  margin-left: 10px;
}
/*自适应表格容器*/
.adaptive-container {
  width: 100% !important;

  height: calc(100vh - 220px);
}
// .table table {
//   // table-layout: auto;
//   width: 100% !important;
// }
</style>
